<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel处理任务状态</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .task-info {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .status {
            padding: 5px 10px;
            border-radius: 3px;
            font-weight: bold;
        }
        .status-pending {
            background-color: #fff3cd;
            color: #856404;
        }
        .status-running {
            background-color: #cce5ff;
            color: #004085;
        }
        .status-completed {
            background-color: #d4edda;
            color: #155724;
        }
        .status-failed {
            background-color: #f8d7da;
            color: #721c24;
        }
        .progress {
            height: 20px;
            background-color: #e9ecef;
            border-radius: 5px;
            margin: 20px 0;
            overflow: hidden;
        }
        .progress-bar {
            height: 100%;
            background-color: #007bff;
            transition: width 0.3s;
        }
        .back-link {
            display: inline-block;
            margin-top: 20px;
            color: #007bff;
            text-decoration: none;
        }
        .back-link:hover {
            text-decoration: underline;
        }
        .results {
            margin-top: 20px;
        }
        .result-item {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 10px;
        }
        .result-success {
            border-left: 4px solid #28a745;
        }
        .result-failed {
            border-left: 4px solid #dc3545;
        }
        .result-error {
            border-left: 4px solid #ffc107;
        }
        .result-skipped {
            border-left: 4px solid #6c757d;
        }
        .arrearage-warning { 
            background-color: #ffe6e6; 
            border: 2px solid #ff0000; 
            padding: 15px; 
            margin: 20px 0; 
            border-radius: 5px;
            font-weight: bold;
            color: #cc0000;
        }
        .summary {
            background-color: #e9ecef;
            padding: 15px;
            border-radius: 5px;
            margin: 20px 0;
        }
        .error-details {
            background-color: #f8d7da;
            border-color: #f5c6cb;
            color: #721c24;
            padding: 10px;
            border-radius: 5px;
            margin-top: 5px;
            font-family: monospace;
            white-space: pre-wrap;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Excel处理任务状态</h1>
        
        <div class="task-info">
            <h3>任务 #{{ task.id }}</h3>
            <p>状态: <span class="status status-{{ task.status }}">{{ task.message }}</span></p>
            <p>Excel文件: {{ task.excel_file }}</p>
            <p>图片目录: {{ task.images_dir }}</p>
            <p>音频目录: {{ task.audios_dir }}</p>
            <p>输出目录: {{ task.output_dir }}</p>
        </div>
        
        <!-- 欠费警告 -->
        <div id="arrearageWarning" class="arrearage-warning" style="display: none;">
            ⚠️ 账户欠费警告：检测到账户欠费，无法继续处理。请充值后重新开始任务。
        </div>
        
        {% if task.status == 'running' or task.status == 'pending' %}
        <div class="progress">
            <div class="progress-bar" style="width: 50%"></div>
        </div>
        <p id="status-text">正在处理中，请稍候...</p>
        {% endif %}
        
        {% if task.status == 'completed' and task.results %}
        <div class="summary">
            <h3>处理结果汇总</h3>
            <p>图片处理总数: {{ task.results.image_results|length }}</p>
            <p>视频生成总数: {{ task.results.video_results|length }}</p>
            <p>成功处理图片数: {{ task.results.image_results|selectattr('status', 'equalto', 'success')|list|length }}</p>
            <p>图片处理失败数: {{ task.results.image_results|selectattr('status', 'equalto', 'failed')|list|length }}</p>
            <p>图片处理错误数: {{ task.results.image_results|selectattr('status', 'equalto', 'error')|list|length }}</p>
            <p>成功生成视频数: {{ task.results.video_results|selectattr('status', 'equalto', 'success')|list|length }}</p>
            <p>跳过视频生成数: {{ task.results.video_results|selectattr('status', 'equalto', 'skipped')|list|length }}</p>
        </div>
        
        <div class="results">
            <h3>图片处理结果</h3>
            {% for result in task.results.image_results %}
            <div class="result-item result-{{ result.status }}">
                <h4>比赛信息</h4>
                <p>时间: {{ result.match_info.match_time or 'N/A' }}</p>
                <p>主队: {{ result.match_info.team_a or 'N/A' }}</p>
                <p>客队: {{ result.match_info.team_b or 'N/A' }}</p>
                <p>文案: {{ result.match_info.copywriting or 'N/A' }}</p>
                <p>状态: {{ result.status }} - {{ result.message }}</p>
                {% if result.image_path %}
                <p>图片路径: {{ result.image_path }}</p>
                {% endif %}
                {% if result.status in ['failed', 'error'] %}
                <div class="error-details">{{ result.message }}</div>
                {% endif %}
            </div>
            {% endfor %}
            
            <h3>视频生成结果</h3>
            {% for result in task.results.video_results %}
            <div class="result-item result-{{ result.status }}">
                <h4>比赛信息</h4>
                <p>时间: {{ result.match_info.match_time or 'N/A' }}</p>
                <p>主队: {{ result.match_info.team_a or 'N/A' }}</p>
                <p>客队: {{ result.match_info.team_b or 'N/A' }}</p>
                <p>文案: {{ result.match_info.copywriting or 'N/A' }}</p>
                <p>状态: {{ result.status }} - {{ result.message }}</p>
                {% if result.video_path %}
                <p>视频路径: {{ result.video_path }}</p>
                {% endif %}
                {% if result.status in ['failed', 'error'] %}
                <div class="error-details">{{ result.message }}</div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        {% endif %}
        
        <a href="{{ url_for('excel_processor') }}" class="back-link">← 返回Excel处理</a>
        <a href="{{ url_for('index') }}" class="back-link">← 返回主页</a>
    </div>

    <script>
        // 如果任务仍在运行，则定期更新状态
        {% if task.status == 'running' or task.status == 'pending' %}
        function updateStatus() {
            fetch('/api/excel-task/{{ task.id }}')
                .then(response => response.json())
                .then(data => {
                    // 更新状态显示
                    document.querySelector('.status').className = 'status status-' + data.status;
                    document.querySelector('.status').textContent = data.message;
                    
                    // 检查是否有欠费错误
                    if (data.arrearage_error) {
                        document.getElementById('arrearageWarning').style.display = 'block';
                    }
                    
                    // 如果任务已完成或失败，刷新页面以显示结果
                    if (data.status === 'completed' || data.status === 'failed') {
                        location.reload();
                    }
                })
                .catch(error => {
                    console.error('Error updating status:', error);
                });
        }
        
        // 每2秒更新一次状态
        setInterval(updateStatus, 2000);
        {% endif %}
    </script>
</body>
</html>